<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start" *ngIf="fromToast">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Notifications</ion-title>
    <ion-buttons slot="end">
      <badge-menu-button></badge-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="with-widgets">
  <!-- loading -->
  <ion-item-group *ngIf="loading; else loaded">
    <ion-item-divider>
      <ion-button slot="end" fill="clear">
        <ion-skeleton-text
          style="width: 90px; height: 14px; border-radius: 0"
          animated
        ></ion-skeleton-text>
      </ion-button>
    </ion-item-divider>
    <ion-item *ngFor="let entry of ['', '', '', '']">
      <ion-label>
        <ion-skeleton-text
          animated
          style="width: 15%; height: 20px; margin-bottom: 12px"
        ></ion-skeleton-text>
        <ion-skeleton-text
          animated
          style="width: 50%; margin-bottom: 18px"
        ></ion-skeleton-text>
        <ion-skeleton-text animated style="width: 20%"></ion-skeleton-text>
      </ion-label>
      <ion-button slot="end" fill="clear">
        <ion-skeleton-text
          animated
          style="width: 20px; height: 20px; border-radius: 0"
        ></ion-skeleton-text>
      </ion-button>
    </ion-item>
  </ion-item-group>

  <!-- not loading -->
  <ng-template #loaded>
    <!-- no notifications -->
    <ion-item-group *ngIf="!notifications.length; else hasNotifications">
      <div
        style="
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        "
      >
        <ion-icon
          style="font-size: 84px; color: #767676"
          name="mail-outline"
        ></ion-icon>
        <h4 style="color: #767676; margin-top: 0px; font-weight: 600">
          Important system alerts and notifications from StartOS will display
          here
        </h4>
      </div>
    </ion-item-group>

    <!-- has notifications  -->
    <ng-template #hasNotifications>
      <ion-item-group
        *ngIf="packageData$ | async as packageData"
        style="margin-bottom: 16px"
      >
        <ion-item-divider>
          <ion-button
            slot="end"
            fill="clear"
            (click)="presentAlertDeleteAll()"
            strong
          >
            Delete All
          </ion-button>
        </ion-item-divider>
        <ion-item *ngFor="let not of notifications; let i = index">
          <ion-label>
            <h2>
              <b>
                <span *ngIf="not['package-id'] as pkgId">
                  <!-- @TODO remove $any when Angular gets smart enough -->
                  {{ $any(packageData[pkgId])?.manifest.title || pkgId }} -
                </span>
                <ion-text [color]="getColor(not)">{{ not.title }}</ion-text>
              </b>
            </h2>
            <h2 class="notification-message">{{ truncate(not.message) }}</h2>
            <p class="view-message-tag">
              <a
                class="view-message-tag"
                *ngIf="not.message.length > 240"
                color="dark"
                (click)="viewFullMessage(not.title, not.message)"
              >
                View Full Message
              </a>
            </p>
            <p>{{ not['created-at'] | date: 'medium' }}</p>
          </ion-label>
          <ion-button
            *ngIf="not.code === 1"
            slot="end"
            fill="clear"
            color="dark"
            (click)="viewBackupReport(not)"
          >
            View Report
          </ion-button>
          <ion-button
            *ngIf="not['package-id'] && packageData[not['package-id']]"
            slot="end"
            fill="clear"
            color="dark"
            [routerLink]="['/services', not['package-id']]"
          >
            View Service
          </ion-button>
          <ion-button slot="end" fill="clear" (click)="delete(not.id, i)">
            <ion-icon slot="icon-only" name="close"></ion-icon>
          </ion-button>
        </ion-item>
      </ion-item-group>

      <ion-infinite-scroll
        [disabled]="!needInfinite"
        (ionInfinite)="doInfinite($event)"
      >
        <ion-infinite-scroll-content
          loadingSpinner="lines"
        ></ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ng-template>
  </ng-template>
</ion-content>
